<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <title>登录</title>

    <style>
        body{
        background: #666;
    }
    #form{
        background: #fff;
        /* margin-top: 50px; */
        padding: 50px;
        border-radius: 10px;
        position: absolute;
        width: 50%;
        top: 200px;
        left: 50%;
        transform: translate(-50%);
        width: 600px;
    }
   #btnbox{
       position: relative;
   }
    #btn{
        width: 50%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    </style>
</head>

<body>

    <div class="container">
        <form class="form-horizontal" id="form">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">账号: </label>
                <div class="col-sm-10">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="请输入账号" name="name">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密码: </label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码" name="pwd">
                </div>
            </div>

            <div class="form-group" id="btnbox">
                <!-- <div class="col-sm-offset-2 col-sm-10" id="btnbox"> -->
                <button type="button" class="btn btn-primary" id="btn">登 录</button>
                <!-- </div> -->
            </div>
        </form>
    </div>

    <script src="../assets/jquery/jquery-3.3.1.min.js"></script>
    <script>
        $('#btn').click(function () {
            var data = $('#form').serialize();
            console.log(data)
            $.ajax({
                url:'./checklogin.php',
                data:data,
                type:'post',
                success:function(msg){
                    console.log(msg)
                    if(msg==1){
                        location.href='./index.html'
                    }else{
                        alert('账号或者密码错误!')
                        $('#form')[0].reset();
                    }
                }
            })
        })
    </script>
</body>

</html>